<template>
  <div id="subLine-controller">
    <div class="item">
      <input type="checkbox" v-model="showAll" @change="controlAll" />
      <span :style="{ 'margin-left': '8px' }">全选</span>
    </div>
    <div class="item-wrapper">
      <div class="item" v-for="item in subLineData" :key="item.id">
        <label class="checkbox-wrapper">
          <!-- 将 :checked 改为 v-model -->
          <input
            type="checkbox"
            v-model="item.checked"
            @change="chooseLine(item)"
          />
          <span
            class="custom-checkbox"
            :style="{
              borderColor: item.color,
              backgroundColor: item.checked ? item.color : 'transparent',
            }"
          ></span>
        </label>
        <span :style="{ color: '#34c5cf', 'margin-left': '5px' }">{{
          item.name.slice(-3)
        }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, computed, watch } from 'vue';
import { useLineData } from '@/store';
// 隐藏线路和站点
import {
  displayByName,
  removeAllBillboards,
} from '@/cesiumTools/LineMaterial/effectController';
import { getLine } from '@/api/line.js';
const lineDataStore = useLineData();
let subLineData = ref([]);
// 修改初始化方式，使用 onMounted 确保数据正确加载
onMounted(async () => {
  let viewer = lineDataStore.Viewer;
  // console.log(viewer);
  //获取地铁线数据
  subLineData.value = await getLine();
  console.log('全选', subLineData.value);
});

// 使用计算属性来控制全选状态
const showAll = computed({
  get() {
    // 当所有项都选中时返回 true，否则返回 false
    return (
      subLineData.value.length > 0 &&
      subLineData.value.every((item) => item.checked)
    );
  },
  set(value) {
    // 将所有项的选中状态设置为当前值
    subLineData.value.forEach((item) => {
      item.checked = value;
    });
  },
});

// 全选，控制所有站点，站线
const controlAll = (e) => {
  const checked = e.target.checked;
  const lineNames = subLineData.value.map((item) => item.name);
  const stationNames = [];
  const billboardsNames = [];
  console.log(subLineData.value);

  subLineData.value.forEach((item) => {
    const { stationsList } = item;
    stationsList.forEach((station) => {
      stationNames.push(station.name);
      billboardsNames.push(station.name)
    });
  });
  // removeAllBillboards();// 直接删除标牌,不能切换显示隐藏

  // 控制地图元素显示隐藏
  displayByName(lineNames, stationNames,billboardsNames, checked);
};

// 监听 subLineData 中每个项的 checked 状态变化
watch(
  subLineData,
  (newValue) => {
    // newValue.forEach(item => {
    //   // 这里可以添加你需要的额外逻辑
    //   console.log(`${item.name} checked status: ${item.checked}`);
    // });
  },
  { deep: true }
); // 使用 deep 选项来监听深层变化

// 单独控制站线
const chooseLine = (item) => {
  const names = [item.name];
  const stationNames = item.stationsList.map((station) => station.name);
  const billboardsNames = item.stationsList.map((station) => station.name);
  // 控制地图元素显示隐藏
  displayByName(names, stationNames, billboardsNames, item.checked);
};
</script>

<style scoped>

#subLine-controller {
  position: relative;
  bottom: 8%;
  left: 33%;
  transform: translateX(-50%);
  width: 6vw; /* 减小宽度 */
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid #664a16;
  padding: 6px;
  display: flex;
  flex-direction: column;
}

.item-wrapper {
  display: flex;
  flex-direction: column; /* 改为纵向排列 */
  gap: 4px; /* 添加间距 */
}

.item {
  width: 100%; /* 占满容器宽度 */
  height: 1.5vw;
  display: flex;
  align-items: center;
  gap: 8px; /* checkbox 和文字之间的间距 */
  padding: 0 0.5vw;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid #885f12;
  color: #fff;
  font-size: 0.521vw;
  pointer-events: all;
  cursor: pointer;
}
/* 自定义复选框样式 */
.checkbox-wrapper {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.checkbox-wrapper input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.custom-checkbox {
  position: absolute;
  top: 2px;
  left: 0;
  width: 12px;
  height: 12px;
  border: 1px solid;
  transition: all 0.3s;
}
</style>
